<template>
  <div class="screen-num fy-flex fy-flex__center">
    <div class="num-view" v-for="(item, index) in numList" :key="index">
      <ul :style="{'margin-top': item * -3.5 + 'rem'}">
        <li v-for="(item, index) in new Array(10)" :key="index">
          {{index}}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  // 全局感知
  name: "",

  // 模板依赖
  components: {},
  filters: {},

  // 接口
  props: {
    num: String
  },

  // 本地状态
  data() {
    return {
      numList: []
    };
  },
  computed: {},
  // 事件
  watch: {
    num() {
      this.initData();
    }
  },
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {
    this.initData();
  },
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  // 非响应式的属性
  methods: {
    initData() {
      !isNaN(this.num) && this.num.length > 0
        ? (this.numList = this.num)
        : this.num;
    }
  }
};
</script>

<style lang="scss" scoped>
.screen-num {
  margin-top: 2rem;
  width: 100%;
  height: 4rem;
  .num-view {
    float: left;
    margin-left: 0.5rem;
    width: 2.5rem;
    height: 3.5rem;
    border-radius: 0.5rem;
    overflow: hidden;
    ul {
      transition: all 1s;
      li {
        list-style-type: none;
        width: 2.5rem;
        height: 3.5rem;
        font-size: 3rem;
        line-height: 3.5rem;
        color: white;
        background: rgba(56, 78, 131, 0.75);
      }
    }
  }
}
</style>
